//自提点管理
<template>
  <div class="self_box">
    <avue-crud
      ref="crud"
      :data="data"
      :option="option"
      @selection-change="selectionChange"
      @search-change="searchChange"
      @search-reset="resetChange"
      v-model:page="page"
      @on-load="onLoad"
      @refresh-change="refreshChange"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
    >
      <template #menu-left="{ size }">
        <el-button
          type="danger"
          icon="el-icon-delete"
          :size="size"
          @click="toggleSelection()"
          >批量删除</el-button
        >
      </template>
    </avue-crud>
  </div>
</template>
  <script>
import axios from 'axios';
export default {
  data() {
    return {
      current:1,
      page:{
        pageSize:10,
      },
      selectList:[],
      data: [],
      option: {
        searchMenuSpan: 4,
        selection: true,
        align: "center",
        menuAlign: "center",
        border: true,
        headerAlign: "center",
        align: "center",
        menuType: "button",
        columnBtn:false,
        column: [
          {
            label: "自提点名称",
            prop: "addrName",
            search: true,
          },
          {
            label: "手机号",
            prop: "mobile",
          },
          {
            label: "省份",
            prop: "province",
          },
          {
            label: "城市",
            prop: "city",
          },{
            label: "区/县",
            prop: "area",
          },
          {
            label: "地址",
            prop: "addr",
          },
        ],
      },
    };
  },
  mounted(){
    this.getList()
  },
  methods: {
    refreshChange () {
      this.$message.success('刷新回调');
    },
    //增加
    rowSave (form, done, loading) {
      form.id = new Date().getTime();
      axios({
        method:"POST",
        url:"http://111.67.198.176:8111/shop/pickAddr",
        data:{
          addr: form.addr,
          addrName: form.addrName,
          area: form.area,
          areaId: form.areaId,
          city: form.city,
          cityId: form.cityId,
          mobile: form.mobile,
          province: form.province,
          provinceId: form.provinceId,
          t: 1669204737512,
        },
        headers:{
          Authorization:
              "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
        }
      })
      done()
      setTimeout(() => {
        this.$message.success('操作成功');
        this.getList()
      }, 2000)
    },
    //删除
    rowDel (form, index, done) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // done(form)
        axios({
          method:"DELETE",
          url:`http://111.67.198.176:8111/shop/pickAddr`,
          data:[form.addrId],
          headers:{
            Authorization:
              "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
          },

        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getList()
      }).catch(() => { });
    },
    //编辑
    rowUpdate (form, index, done, loading) {
      axios({
        method:"PUT",
        url:"http://111.67.198.176:8111/shop/pickAddr",
        data:{
          addr: form.addr,
          addrId: form.addrId,
          addrName: form.addrName,
          area: form.area,
          areaId: form.areaId,
          city: form.city,
          cityId: form.cityId,
          mobile: form.mobile,
          province: form.province,
          provinceId: form.provinceId,
          t: 1669205328062,
        },
        headers:{
          Authorization:
              "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
        }
      })
      setTimeout(() => {
        this.$message.success('操作成功');
        done();
        this.getList()
      }, 2000)
    },
    //全选监听
    selectionChange(list) {
      console.log(list)
      this.selectList=[],
      list.forEach(item=>{
        this.selectList.push(item.addrId)
      })
      
    },
    //批量删除按钮
    toggleSelection() {
      axios({
        method:"DELETE",
        url:"http://111.67.198.176:8111/shop/pickAddr",
        data:this.selectList,
        headers:{
          Authorization:
              "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
        }
      })
      this.$message.success('操作成功');
      this.getList()
    },
    resetChange (item) {
      this.$message.success('清空回调')
    },
    //搜索
    searchChange (params, done) {
      this.$message.success('2s后关闭锁定')
      setTimeout(() => {
        done(params);
        axios({
          method:"get",
          url:`http://111.67.198.176:8111/shop/pickAddr/page?t=1669105154434&current=1&size=10&addrName=${params.addrName}`,
          headers:{
            Authorization:
              "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
          }
        }).then(res=>{
          console.log(res);
          this.data=res.data.records
        })
        this.$message.success(JSON.stringify(params));
      }, 2000)

    },
    //获取总数据
    getList(){
      axios({
        method:"get",
        url:`http://111.67.198.176:8111/shop/pickAddr/page?t=1669017313339&current=${this.current}&size=10`,
        headers:{
          Authorization: "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J"
        }
      }).then(res=>{
        console.log(res);
        this.data=res.data.records
        localStorage.setItem("alength",JSON.stringify(res.data.total))
      })
    },
    //分页功能
    onLoad(page){
      let Length=localStorage.getItem("alength")
      this.page.total=Number(Length)
      this.current=this.page.currentPage;
      this.getList()
    }
  },
};
</script>
  <style lang="scss">
.self_box {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.el-form-item__label {
  width: 90px !important;
}
</style>